<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<body style="position:relative;overflow-x:hidden;opacity:0;">
<script type="text/javascript">
  var showResources = false;
  $(document).ready(function() {
    layout();
    $("#resources ul li a").click(function() {
      toggleResources();
    });
  });
  
  $(window).resize(layout);

  function layout() {
    var w = $(window).width();
    var h = $(window).height();
    $("#resources").css({ top : showResources ? 0 : (h - 60) });
  }

  function toggleResources() {
    showResources = !showResources;
    layout();
  }

  function wikipedia() {
    var s =  $("#wikipedia .search");
    var input = s.find("input");
    if (input.val().length == 0) { input.focus(); return; }
    var instructions = s.find(".instructions").html("Searching...");
    $.ajax({
      url : "/resource/wikipedia?search=" + input.val(),
      type : "post",
      success : function(response) {
        instructions.hide();
        s.find(".title").html(input.val()).show();
        $("#wikipedia .result").html(response);
        input.val("");
      }
    });
  }
</script>
<style type="text/css">
  body { overflow : hidden; }
  #periodic_table { width : 100%; }
  #resources { width : 100%; top : 100%; -webkit-transition: top 0.5s; }
</style>
<div id="periodic_table" class="tabs">
  <ul>
    <li><a href="#guide">Guide</a></li>
    <li><a href="#table">Table</a></li>
  </ul>
  <div id="guide">
    guide
  </div>
  <div id="table">
    table
  </div>
</div>
<div id="resources" class="tabs p-absolute" onclick="toggleResources();">
  <ul>
    <li><a href="#wikipedia">Wikipedia</a></li>
    <li><a href="#google">Google</a></li>
  </ul>
  <div id="wikipedia">
    wikipedia
  </div>
  <div id="google">
    google
  </div>
</div>
</body>